<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM</title>
</head>
<body>
<div id="app">
    <h2>{{name}}</h2>
</div>
<!--<script src="./mvvm-master/js/vue.js"></script>-->
<script src="./mvvm-master/js/observer.js"></script>
<script src="./mvvm-master/js/compile.js"></script>
<script src="./mvvm-master/js/watcher.js"></script>
<script src="./mvvm-master/js/mvvm.js"></script>
<script>
    //v-model 双向数据绑定 最直观表现形式


    //数据代理

//    const vm = new Vue({
    const vm = new MVVM({
//        el: "<template><div></div></template>",
        el: "#app",
        data: {
            name: "aa",
            age: {
                a1: 18
            }
        }
    });

    //数据代理效果
    console.log(vm.name, vm); //vm代理了对data数据读操作

    vm.name = "100"; //vm代理了对data数据写操作

    console.log(vm.name);

    //数据代理 (中介
    // vm.data.name <=> vm.name
    //数据代理不仅仅是vue中专属的,这是一个编程思想,主要是为了方便用户对数据进行更好的操作

</script>
</body>
</html>